<!DOCTYPE html>

<html>

<head>

  <!-- 页面meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>员工管理</title>

<!--  <style>-->
<!--    .el-header {-->
<!--      background-color: #B3C0D1;-->
<!--      color: #333;-->
<!--      line-height: 60px;-->
<!--    }-->

<!--    .el-aside {-->
<!--      color: #333;-->
<!--    }-->
<!--  </style>-->

  <!-- 引入样式 -->
  <link rel="stylesheet" href="../plugins/elementui/index.css">
  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../css/style.css">
</head>
<body class="hold-transition">

<div id="app">


  <el-container style="height: 100vh; width: 100vw; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']">

        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>导航一</template>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>导航二</template>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title"><i class="el-icon-setting"></i>导航三</template>
          <el-submenu index="3-4">
            <template slot="title">选项4</template>
            <el-menu-item index="3-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>

      </el-menu>

    </el-aside>
    <el-container>


      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>

      <el-main>
        <!-- 搜索表单-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">

          <el-form-item>

            <el-button type="primary" >查询</el-button>
            <el-button type="primary" plain @click="handleCreate()">新增</el-button>
            <el-button type="danger" plain >批量删除</el-button>
          </el-form-item>
        </el-form>

        <!--  添加数据对话框  -->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
        >
          <el-form ref="form" :model="employee" label-width="80px">
            <el-form-item label="员工编号">
              <el-input v-model="employee.id"></el-input>
            </el-form-item>
            <el-form-item label="员工姓名">
              <el-input v-model="employee.employeeName"></el-input>
            </el-form-item>
            <el-form-item label="岗位">
              <el-input v-model="employee.department"></el-input>
            </el-form-item>
            <el-form-item label="职位">
              <el-input v-model="employee.position"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="addemployee" >提交</el-button>
              <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>


        <!--  编辑数据对话框  -->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisibleEdit"
                width="30%"
        >
          <el-form ref="form" :model="employee" label-width="80px">
            <el-form-item label="员工编号">
              <el-input v-model="employee.id"></el-input>
            </el-form-item>
            <el-form-item label="员工姓名">
              <el-input v-model="employee.employeeName"></el-input>
            </el-form-item>
            <el-form-item label="岗位">
              <el-input v-model="employee.department"></el-input>
            </el-form-item>
            <el-form-item label="职位">
              <el-input v-model="employee.position"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleEdit" >提交</el-button>
              <el-button @click="dialogVisibleEdit = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>



        <!-- 表格数据-->
        <template>
          <el-table
                  :data="tableData"
                  style="width: 100%"
                  :row-class-name="tableRowClassName">

            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    type="index"
                    label="序号"
                    :index="1">
            </el-table-column>

            <el-table-column
                    prop="id"
                    label="员工编号"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="employeeName"
                    label="员工姓名"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="department"
                    label="岗位"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="position"
                    label="职位"
                    align="center"
            >
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>



        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
        </el-pagination>



      </el-main>
    </el-container>
  </el-container>







</div>
</body>

<!-- 引入组件库 -->

<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<script>

  var vue = new Vue({
    // components: {
    //     Navigation,
    // },
    el: '#app',
    data() {
      return {
        //每页显示的条数
        pageSize: 5,
        //
        totalCount: 100,
        //分页
        currentPage: 1,
        //员工数据模型
        employee: {
          id: '',
          employeeName: '',
          department: '',
          position: '',
        },
        // employee:{},//表单数据
        dialogVisible: false,//添加数据对话框是否展示的标记
        dialogVisibleEdit: false,//添加数据对话框是否展示的标记
        //搜索表单数据
        formInline: {
          user: '',
          region: ''
        },
        //
        selectedId: [],
        //被选中的id数组
        selectedIds: [],
        //复选框选中数据集合
        multipleSelection: [],
        //表格数据
        tableData: [
        ]
      }
    },

    //钩子函数，VUE对象初始化完成后自动执行
    created() {
      this.getAll();
    },

    methods: {

      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getAll(); // Fetch data for the new page size
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.getAll(); // Fetch data for the new page
      },
      // 删除
      handleDelete(row) {
        console.log(row);
        //1.弹出提示框
        this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
          type:'info'
        }).then(()=>{
          //2.做删除业务
          axios.delete("http://localhost:8080/employees/"+row.id).then((res)=>{
            if(res.data.code == 20021){
              this.$message.success("删除成功");
            }else{
              this.$message.error("删除失败");
            }
          }).finally(()=>{
            this.getAll();
          });
        }).catch(()=>{
          //3.取消删除
          this.$message.info("取消删除操作");
        });
      },

      //弹出编辑窗口
      handleUpdate(row) {
        console.log(row);   //row.id 查询条件
        //查询数据，根据id查询
        axios.get("http://localhost:8080/employees/"+row.id).then((res)=>{
          // console.log(res.data.data);
          if(res.data.code == 20041){
            //展示弹层，加载数据
            this.employee = res.data.data;
            this.dialogVisibleEdit = true;
          }else{
            this.$message.error(res.data.msg);
          }
        });
      },

      //编辑
      handleEdit() {
        //发送ajax请求
        axios.put("http://localhost:8080/employees",this.employee).then((res)=>{
          //如果操作成功，关闭弹层，显示数据
          if(res.data.code == 20031){
            this.dialogVisibleEdit = false;
            this.$message.success("修改成功");
          }else if(res.data.code == 20030){
            this.$message.error("修改失败");
          }else{
            this.$message.error(res.data.msg);
          }
        }).finally(()=>{
          this.getAll();
        });
      },

      //弹出添加窗口
      handleCreate() {
        this.dialogVisible = true;
        this.resetForm();
      },
      //重置表单
      resetForm() {
        this.employee = {};
      },
      //表单添加员工
      addemployee() {
        //发送ajax请求
        axios.post("http://localhost:8080/employees",this.employee).then((res)=>{
          console.log(res.data);
          //如果操作成功，关闭弹层，显示数据
          if(res.data.code == 20011){
            this.dialogVisible = false;
            this.$message.success("添加成功");
          }else if(res.data.code == 20010){
            this.$message.error("添加失败");
          }else{
            this.$message.error(res.data.msg);
          }
        }).finally(()=>{
          this.getAll();
        });
      },

      getAll() {
        const offset = (this.currentPage - 1) * this.pageSize;
        const limit = this.pageSize;
        // Send AJAX request with pagination parameters
        axios.get(`http://localhost:8080/employees?offset=${offset}&limit=${limit}`)
                .then((res) => {
                  this.tableData = res.data.data;
                  this.totalCount = res.data.totalCount; // Update the total count of items
                });
      },
      //列表
      // getAll() {
      //     //发送ajax请求
      //     axios.get("http://localhost:8080/employees").then((res) => {
      //         this.tableData = res.data.data;
      //     });
      // },
      //表格背景
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
  })

</script>


</html>